<template>
	<view class="page_order">
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="onClickItem" />
		</view>
		<view class="order_card">
			<view class="card" v-for="(item, index) in orderList" :key="index" @click="gotoDetails(item)">
				<view class="card_top">
					<view class="font14">{{item.reservedFyTraceNo}}</view>
					<view class="font12">{{item.createTime}}</view>
				</view>
				<view class="line" color="#eaeaea" :hairline="false"></view>
				<view class="card_medium">
					<view class="med_right">
						<!-- <text class="font12 fontbold med_right1">{{ item.content| formatRule}}</text> -->
						<view class="ShoppingItem" v-for="item1 in item.storeGoodsList">
							<view class="ShoppingLeft">
								<image src="/static/Index/ShoppingSVG.svg" mode="scaleToFill"></image>
							</view>
							<view class="ShppingRight">
								<view class="ShoppingRightTop">
									<view class="ShoppingTitle">{{item1.name}}</view>
									<view class="ShoppingMoney">￥{{item1.salePrice}}</view>
								</view>
								<view class="ShoppingNum" style="color: red;font-size: 26rpx;"
									v-if="item.uniqueMatches && item.uniqueMatches.join('').indexOf('会员活动') != -1">
									会员价：{{item1.vipPrice}}
								</view>
								<view class="ShoppingNum">
									x {{item1.imageUrl}}
								</view>
								<!-- 								<view class="ShoppingRightButtom" >
									进货价：{{item1.costPrice}} 毛利率：{{(Number(item1.costPrice)/Number(item1.salePrice)).toFixed(2)}}%
								</view> -->
							</view>
						</view>

					</view>
				</view>
				<view class="card_btm">
					<view class="Left">
						<view class="font14" :style="item.OrderColor">{{ item.orderStatus }}</view>
					</view>

					<view class="Right" v-if="item.uniqueMatches">
						<view class="PayFanShi">
							参与活动：
						</view>
						<view>
							{{item.uniqueMatches}}
						</view>
					</view>
				</view>
				<view class="ItemButtom">
					<view class="ShiFuDiv">
						<!-- <view class="ShiFuDiv">
							<view class="font12 " style="color: #65b59a;">利润{{ item.subtract }}元</view>

						</view> -->
						<view class="ShiFuDiv" style="gap: 12rpx;">
							<view class="GonJiText">共计{{item.totalNum}}件商品</view>
							<view class="GonJiText">会员优惠 -{{Number(item.vipYouHuiPrice).toFixed(2)}}元</view>
							<view class="GonJiText">活动优惠 -{{Number(item.activityYouHuiPrice).toFixed(2)}}元</view>
							<view class="HeJiMoney">合计金额：￥{{ item.price}}</view>
						</view>
					</view>
					<view class="ShiFuDiv">
						<view class="font11">订单号：</view>
						<view class="font11">{{ item.orderNum}}</view>
					</view>
				</view>
			</view>
		</view>
		<kevy-empty :show="true" type="goods" text="订单空空如也,快去购买商品吧~" v-if="orderList.length==0"></kevy-empty>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				items: ['全部订单', '已完成订单', '已取消订单', '已退款订单'],
				current: 0,
				activeColor: 'rgba(54, 152, 252, 1)',
				styleType: 'text',
				orderList: [], // 订单列表
				orderList2: [], // 订单列表
				page: 1, // 页码
				pageSize: 10, // 页面大小
				noMore: false, // 没有更多了
				ColorStatus: new Map(),
				OrderColor: '',
				orderStatus: new Map(),
				curNow: 0,
				searchAll: {
					"orderStatus": '', // 查全部
					"pageNum": 1,
					"pageSize": 10,
					"storeId": wx.getStorageSync("SelectMenDian"),
				},
				userInfo: {},
				hasNext: true
			}
		},
		onLoad() {
			this.userInfo = JSON.parse(uni.getStorageSync("user"))
			this.orderStatus.set('0', '生成中');
			this.orderStatus.set('1', '已完成');
			this.orderStatus.set('2', '已取消');
			this.orderStatus.set('3', '已退款');

			this.ColorStatus.set('0', 'color:orange');
			this.ColorStatus.set('1', 'color:#25A785');
			this.ColorStatus.set('2', 'color:gray');
			this.ColorStatus.set('3', 'color:red');
			this.OrderColor = this.ColorStatus.get('1')

			this.orderQueryByDate(1)
			// this.active = 0;
			// this.getAllOrderList(); // 获取订单
		},
		filters: {
			formatRule(val) {
				val = val.replace(/`/g, '--')
				val = val.replace(/\\n/g, '\n')
				return val
			}
		},
		// onReachBottom() {
		// 	if (this.hasNext == true) {
		// 		this.searchAll.pageNum += 1
		// 		this.orderQueryByDate(0)
		// 	}
		// },
		methods: {
			orderQueryByDate(num) {

				uni.showLoading({
					title: '加载中'
				});
				this.$request(this.$api.getVipOrder, null, "GET", false).then(res => {
					if (res.code == '200') {
						uni.hideLoading();
						// this.hasNext = res.data.hasNext
						if (num == 1) { // 更新
							this.orderList = []
							res.data.forEach(i => {
								i.OrderColor = this.ColorStatus.get(i.orderStatus.toString())
								i.orderStatusnum = JSON.parse(JSON.stringify(i.orderStatus))
								i.orderStatus = this.orderStatus.get(i.orderStatus.toString())
								i.cententList = []
								if (i.content == null || i.content == '') {
									i.content = '-------------'
								} else {}
								if (i.discounts) {
									var regex = /【(.*?)】/g;

									var matches = i.discounts.match(regex);
									i.uniqueMatches = Array.from(new Set(
										matches.map(match => match)
										// matches.map(match => match.slice(1, -
										// 1))
									));
								} else {
									i.uniqueMatches = false
								}

								// console.log(i.cententList)
							})
							this.orderList = res.data
							this.orderList2 = res.data
						} else { // 添加
							res.data.forEach(i => {
								i.orderStatusnum = JSON.parse(JSON.stringify(i.orderStatus))
								i.OrderColor = this.ColorStatus.get(i.orderStatus.toString())
								i.orderStatus = this.orderStatus.get(i.orderStatus.toString())

								i.cententList = []
								if (i.content == null || i.content == '') {
									i.content = '-------------'
								} else {}
								if (i.discounts) {
									var regex = /【(.*?)】/g;

									var matches = i.discounts.match(regex);
									i.uniqueMatches = Array.from(new Set(
										matches.map(match => match)
										// matches.map(match => match.slice(1, -
										// 1))
									));
								} else {
									i.uniqueMatches = false
								}
								// console.log(i.cententList)
								this.orderList.push(i)
							})
						}


					} else {
						uni.hideLoading();
						uni.showToast({
							title: res.description,
							icon: 'error'
						});
					}
				})
			},
			gotoDetails(item) {
				uni.navigateTo({
					url: "/pages/order/Details?orderNum=" + item.orderNum
				})
			},
			prefixZero(n, m) {
				var _a = (Array(m).join(0) + n).slice(-m);
				return _a;
			},
			onClickItem(e) { // 切换
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
					console.log(e.currentIndex);


					if (this.current == 0) {
						this.searchAll.orderStatus = ''
						this.searchAll.pageNum = 1
						// this.orderQueryByDate(1)
						this.orderList = this.orderList2
					} else {
						this.orderList = this.orderList2.filter((item) => {
							console.log(item);
							return item.orderStatusnum == e.currentIndex
						})
						this.searchAll.orderStatus = this.current
						this.searchAll.pageNum = 1
						// this.orderQueryByDate(1)
					}

				}
			},
			sectionChange(index) {
				this.curNow = index;
			}
		}
	}
</script>

<style lang="scss">
	.ShoppingItem {

		display: flex;
		min-height: 200rpx;
		padding: 10rpx 20rpx 10rpx 0rpx;
		background: #fafafa;

		.ShoppingLeft {
			width: 200rpx;
			height: 150rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 30rpx;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.ShppingRight {
			min-height: 200rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			width: 100%;

			.ShoppingRightTop {
				font-size: 30rpx;
				display: flex;
				justify-content: space-between;

				.ShoppingTitle {
					width: 400rpx;
				}

				.ShoppingMoney {}
			}

			.ShoppingNum {
				color: gray;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				width: 100%;
				font-size: 30rpx;
			}

			.ShoppingRightButtom {
				color: gray;
			}
		}


	}

	.GonJiText {
		color: black;
		font-size: 24rpx;
	}

	.HeJiMoney {
		font-size: 22rpx;
	}

	.ItemButtom {
		margin-bottom: 23rpx;
	}

	.ShiFuDiv {
		display: flex;
		align-items: center;
		color: #acaead;
		justify-content: center;
		margin-bottom: 14rpx;
	}

	.line {
		margin: 0rpx;
		border-bottom: 2rpx solid rgb(234, 234, 234);
		width: 100%;
		border-top-color: rgb(234, 234, 234);
		border-right-color: rgb(234, 234, 234);
		border-left-color: rgb(234, 234, 234);
		vertical-align: middle;
	}

	.uni-common-mt {
		width: 100%;
		position: fixed;
		height: 6.5vh;
		top: 0;
		background: white;
		z-index: 999;
	}

	.page_order {
		width: 100vw;
		min-height: 100vh;
		background-color: #f6f6f6;

		.col_red {
			color: red;
		}

		.font12 {
			font-size: 24rpx;
		}

		.font14 {
			font-size: 28rpx;
		}

		.font16 {
			font-size: 32rpx;
			line-height: 60rpx;
		}

		.order_card {
			width: 100vw;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-top: 6.5vh;
			background-color: #f6f6f6;

			.card {
				width: 95%;
				// min-height: 400rpx;
				margin-top: 30rpx;
				border-radius: 20rpx;
				background-color: white;
				box-shadow: 2rpx 2rpx 10rpx #d5d5d5;

				.card_top {
					display: flex;
					padding: 15rpx;
					// margin-left: 10rpx;
					color: #3f7ffd;
					margin-left: 40rpx;
					align-items: center;
					justify-content: space-between;

					:last-child {
						color: #b6b6b6;
						// margin-right: 20rpx;
					}

					:first-child {
						&::before {
							position: relative;
							display: block;
							content: '';
							width: 10rpx;
							height: 10rpx;
							top: 20rpx;
							left: -22rpx;
							background-color: #3f7ffd;
							border-radius: 5rpx;
						}


					}
				}

				.card_medium {
					width: 97%;
					min-height: 128rpx;
					display: flex;
					align-items: center;
					padding: 15rpx 10rpx;
					margin-top: 9rpx;

					.card_img {
						height: 180rpx;
						width: 180rpx;
						border-radius: 20rpx;
					}

					.med_right {
						min-height: 100rpx;
						/* margin-left: 20rpx; */
						width: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						padding: 10rpx 0;
						gap: 20rpx;

						.med_right1 {
							margin-bottom: 30rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							width: 100%;
							line-height: 50rpx;
							color: #697ed1;
						}

						.med_right2 {
							color: #909090;
							margin-bottom: 25rpx;

						}

						.med_right3 {
							display: flex;
							align-items: center;
						}
					}
				}

				.card_btm {
					height: 85rpx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					position: relative;
					bottom: 9rpx;

					.Right {
						display: flex;
						align-items: center;
						margin-right: 10rpx;
					}

					.Left {
						margin-left: 27rpx;
						font-size: 22rpx;
					}

					.BigPayFanShi {
						margin-right: 46rpx;
						font-size: 38rpx;
						font-weight: 500;
					}

					.PayFanShi {
						font-size: 26rpx;
					}

					.btm1 {
						height: 60rpx;
						width: 200rpx;
						background-color: #ffffff;
						color: #25A785;
						border: #25A785 2rpx solid;
						margin-left: 260rpx;
					}

					.btm2 {
						height: 60rpx;
						width: 200rpx;
						background-color: #25A785;
						color: white;
					}
				}
			}
		}
	}
</style>